import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import React from 'react';

interface GragItemProps extends React.HTMLAttributes<HTMLDivElement> {
    id: string,
    children: any;
    dragDisabled: boolean
}

const GragItem: React.FC<GragItemProps> = ({ id, dragDisabled, ...rest }) => {
    const { attributes, listeners, setNodeRef, transform, transition, } = useSortable({
        id: id,
        disabled: dragDisabled,
    });

    const style = {
        transform: CSS.Translate.toString(transform),
        transition,
    };

    return (
        <div
            ref={setNodeRef}
            // className={`w100 grid-item ${isDragging ? 'dragging' : ''}`}
            {...attributes}
            {...listeners}
            style={style}
            {...rest}
        >
        </div>
    );
};

export default GragItem;